import React from 'react'
//1..引入环境变量展示图片
import { $pre } from '../../../../http/http'

//2.引入自身的less
import './Miao.less'

//3.引入路由实现页面跳转 withRouter伴随路由,可以让非路由组件实现页面的跳转
import { Link, withRouter } from 'react-router-dom'

function Miao(props) {
    let { miao } = props
    return (
        <div className='Miao'>
            <h1>限时秒杀</h1>
            <ul>
                {miao.map(item => {
                    return (
                        <li className='shopItem' key={item.id} onClick={() => {
                            props.history.push('/detail/'+item.id)
                        }}>
                            <img src={$pre + item.img} alt="" />
                            <div className='right'>
                                <h2>{item.goodsname}</h2>
                                <p>￥{item.price}</p>
                                <p>￥{item.market_price}</p>
                                <div className='iconfont' onClick={(e) => {
                                    //阻止冒泡
                                    e.stopPropagation()
                                    props.history.push('/shop/'+item.id)
                                }}> 加入购物车</div>
                            </div>
                        </li>
                    )
                })}
            </ul>
        </div>
    )
}

export default withRouter(Miao)
